<!--
 * @Date: 2024-11-01 15:58:11
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-11-04 09:24:46
 * @Description: 
-->
<template>
  <div class="design-widget-action" :style="actionStyles">
    <!-- <div class="widget-action-box">
      <div class="action-label">
        <span>按钮</span>
      </div>
      <div class="action-tools">
        <VfIcon name="iv-icon-back" />
        <VfIcon name="iv-icon-move-up" />
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { computed, reactive, watch, nextTick } from 'vue';


const props = defineProps({
  refList: { type: Object },
  designer: { type: Object }
})


const setActionInfo = (selWidget) => {
  const selId = selWidget.id
  const selRef = props.refList[selId]
  if (!selRef) return
  const selEle = selRef.$el
  const { offsetLeft, offsetTop} = selEle
  const { top, left, width, height } = selEle.getBoundingClientRect()
  console.log('selEle', { selEle })
  console.log('setActionInfo', { top, left, width, height, offsetLeft, offsetTop })
  Object.assign(actionState, { top: offsetTop + (height / 2), left: left - 262, width, height })
}
const actionState = reactive({
  top: 0,
  left: 0,
  width: 0,
  height: 0,
})
const actionStyles = computed(() => {
  const { top, left, width, height } = actionState
  let styles = { 
    top: top ? `${top}px` : 0,
    left: left ? `${left}px` : 0,
    width: width ? `${width}px` : 0,
    height: height ? `${height}px` : 0,
  }
  console.log(styles)
  return styles
})

watch(
  () => props.designer.selectedWidget,
  (nv) => {
    console.log('props.designer.selectedWidget', {
      nv, refList: props.refList
    })
    nextTick(() => { setActionInfo(nv) })
    
  },
  { deep: true, immediate: false },
)

</script>

<style lang="scss" scoped>
.design-widget-action {
  position: absolute;
  width: 63.7891px;
  height: 32px;
  top: 17px;
  left: 17px;
  z-index: 20;
  border: 1px #3e8bf2 dashed;
  background: #3e8bf20f;
  pointer-events: none;
  box-sizing: border-box;
  &::before {
    content: "";
    height: 5px;
    background: var(--epic-primary-color);
    position: absolute;
    left: 0;
    width: 100%;
  }
}
.widget-action-box {
  position: absolute;
  z-index: 999;
  height: 30px;
  color: #fff;
  background: #3e8bf2;
  border-radius: 4px 4px 0 0;
  display: flex;
  padding: 0 4px;
  box-sizing: border-box;
  .action-label {
    height: 30px;
    padding: 0 4px;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 14px;
    white-space: nowrap;
  }
  .action-tools {
    display: flex;
    align-items: center;
  }
}

</style>